<template>
  <div class="top">
    <div class="topNav">
      <div class="left-icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liebiao2"></use>
        </svg>
      </div>
      <!--搜索框-->
      <div class="search" v-if="showInput">
        <!-- <div class="swiper" style="z-index: 1000;" @click="getPath('search')">{{ titleswiper }}</div> -->
        <label :data-before="before" :data-after="after" 
                :class="{ animate: shouldAnimate }"
                @animationend="animationEnded">

          <input type="text" :placeholder="placeholder" 
                @focus="focus" @blur="blur"
                @click="$router.push('/search')" />
        </label>
        <div class="head-search">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fangdajing"></use>
          </svg>
        </div>
      </div>

      <div class="right-icon">
        <svg class="icon" aria-hidden="true" @click="$router.push('/search')">
          <use xlink:href="#icon-fangdajing"></use>
        </svg>
      </div>
    </div>
  </div>
    
</template>

<script>
import { mixin } from './mixins'


  export default {
    mixins: [mixin],
    props: {
      showInput: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        keywords: ['不将就 李荣浩', 'spylent','我记得 赵雷 最近听过','最佳损友 陈奕迅', '中文说唱排行榜（评论2w+','回答 YOUNG','红 罗言', '杨和苏', '我想part2 法老'],
        // keywords: [1,2,3,4],
        isFocusing: false,
				currentIndex: 0,
				animationTriggerFlag: false,
				timer: null,

      }
    },
    computed: {
      before() {
				let keyword = this.keywords[this.currentIndex]
				return this.isFocusing ? '' : keyword
			},
			after() {
				let keyword =
					typeof this.keywords[this.currentIndex + 1] === 'undefined' ? this.keywords[0] : this.keywords[this.currentIndex + 1]
				return this.isFocusing ? '' : keyword
			},
			placeholder() {
				let keyword = this.keywords[this.currentIndex]
				return this.isFocusing ? '' : keyword
			},
			// 是否开启动画
			shouldAnimate() {  // 没有focus并且开启了动画
				return !this.isFocusing && this.animationTriggerFlag
			},
    },
    created(){
      // 刚进入页面1秒后再执行动画
			setTimeout(() => {
				this.animationTriggerFlag = true
			}, 100)
    },
  //   mounted(){
  //     let _this = this
      
  //     setInterval(function(){
  //       console.log(222)
  //       console.log(_this.index)
  //       if (_this.index < _this.swiperList.length - 1) {
  //           _this.index++;
  //       } else {
  //           _this.index = 0;
  //       }
  //       //重新绑定
  //       // Vue.set(swiperList, _this.index, _this.swiperList[_this.index])
  //       _this.titleswiper = _this.swiperList[_this.index];
  //   },1000)
  // },
    methods: {
      // 动画结束调用事件
			animationEnded(e) {
				// pseudoElement伪元素
				if (e.pseudoElement === '::after') {
					this.animationTriggerFlag = false
					let newIndex = typeof this.keywords[this.currentIndex + 1] === 'undefined' ? 0 : this.currentIndex + 1
					this.currentIndex = newIndex
					setTimeout(() => {
						this.animationTriggerFlag = true
					}, 1000)
				}
			},
			focus() {
				// 如果一直点击，动画会一直执行，要先清除动画
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.isFocusing = true
				this.animationTriggerFlag = false
			},
			blur() {
				// 鼠标blur后3秒之后再执行动画
				this.timer = setTimeout(() => {
					this.isFocusing = false
					//this.animationTriggerFlag = true
				}, 1000)
			}
    }
  //实例销毁之前调用
  // beforeDestroy: function () {
  //   if (this.timer) {
  //       clearInterval(this.timer);  //在Vue实例销毁前，清除我们的定时器
  //   }
  // }
  }
</script>
<style scoped>
.top {
  width: 100%;
  height: 55px;
  position: fixed;
  z-index: 100;
  top: 0;
  background-color: white
}
.topNav{
  /* width: 100%;
  height: 55px; */
  /* position: fixed; */
  /* z-index: 100; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topNav .left-icon, .right-icon {
  margin-left: 2px;
  width: 1rem;
  height: 1rem;
  text-align: center;
  font-size: .5rem
}
/*搜索框*/
.search {
  /* flex: 1; */
  width: 300px;
  position: relative;
  /* margin-right: 20px; */
}

.search input{
  height: 30px;
  line-height: 30px;
  text-align: left;
  width: 100%;
  border-radius: 25px;
  border: 0;
  background-color:rgba(225, 225, 225,0.4);
  text-indent:40px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: rgba(150, 150, 150, 1);
}

.head-search {
  text-align: center;
  position: absolute;
  top: 6px;
  left: 17px;
}

.head-search .icon {
  text-align: center;
  font-size: .5rem;
  text-align: left;
}

.play {
  width: 30px;
  height: 30px;
}
  label {
		position: relative;
		display: block;
		overflow: hidden;
	}
 /* 动态绑定元素 */
	label::before {
		content: attr(data-before);
	}

	label::after {
		content: attr(data-after);
	}

	label::before,
	label::after {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		border: 3px solid transparent;
		font-size: 15px;
		padding: 0.5rem .5rem;
		font-family: inherit;
		box-sizing: border-box;
		color: #999;
	}

  @keyframes placeholder-before {
		0% {
			transform: translateY(0%);
			opacity: 0;
		}
		100% {
			transform: translateY(-100%);
			opacity: 0;
		}
	}

	@keyframes placeholder-after {
		0% {
			transform: translateY(0%);
			opacity: 0;
		}
		100% {
			transform: translateY(-100%);
			opacity: 0;
		}
	}

	.animate::before {
		animation: 2s placeholder-before ease-in-out;
	}

	.animate::after {
		animation: 2s placeholder-after ease-in-out;
	}
  .animate::before,
	.animate::after {
		animation-fill-mode: forwards;
	}

</style>